<template>
    <div class="shopCarContainer">
        <!-- //商品列表区域 -->
        <div class="shopList">
        <div class="mui-card"  v-for="(item,i) in goodlist" :key="item.id">
             <!-- v-for="item in goodlist" :key="item.id" -->
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
                        <!-- 复选框 -->
                        <form class="mui-input-group">
					<div class="mui-input-row mui-checkbox mui-left">
						<label ></label>
                        <!-- 利用v-model从store中取值,不取双向数据绑定的作用,用change监听数据改变 -->
						<input name="checkbox" value="Item 1" type="checkbox" v-model="$store.getters.getGoodsSelected[item.id]" 
                        
                        @change="selectedChanged(item.id,$store.getters.getGoodsSelected[item.id])" >
					</div>
                        </form>
				<!-- <mt-switch v-model="value"></mt-switch> -->
						<img :src="item.thumb_path">
                        <div class="info"> 
                            <h2>{{item.title}}</h2>
                            <p>
                                <span class="shopCarPrice">￥{{item.sell_price}} </span>
                                <numberbox :innerCount="$store.getters.getGoodsCount[item.id]" :goodsid="item.id"></numberbox>
                                <a @click.prevent="remove(item.id,i)">删除</a>
                                <!-- i是用来删除goodlist里的数据,item.id是用来删除store中的数据 -->
                            </p>
                        </div>
					</div>
				</div>
        </div>
        </div>
                <!-- //结算区域 -->
                 <div class="mui-card" >
				<div class="mui-card-content">
					<div class="mui-card-content-inner sum">
						<div class="left">
                            <p>总计(不含运费)</p>
                            <p>已勾选商品 <span class="red">{{$store.getters.getGoodsCountAndAmount.count}}</span> 件,总价 ￥ <span class="red">{{$store.getters.getGoodsCountAndAmount.amount}}</span> </p>
                            
                        </div>
                        <mt-button type="danger">去结算</mt-button>
					</div>
                    
				</div>
                 </div>
                 
        </div>
        
</template>
<script>
import numberbox from '../subcompoments/ShopCar-number-box.vue'
export default {
    data(){
        return{
            goodlist:[]//购物车中所有的商品
        }
    },
    created(){
        this.getGoodsList()
    },
    methods:{
        getGoodsList(){
            var idArr=[]
            this.$store.state.car.forEach(item=>{
                idArr.push(item.id);
                if(idArr==0){//如果购物车中没有商品,则直接返回,不需要请求数据接口,否则会报错
                    return;
                }
            })
            this.$http.get('api/goods/getshopcarlist/'+idArr.join(",")).then(result=>{
                if(result.body.status==0){
                    this.goodlist=result.body.message;
                }
            })
        },
        remove(id,index){//点击删除,把商品从store中根据传递的id删除,同时把当前组件中的goodlist中,
        // 对应要删除的那个商品使用index来删除
        this.goodlist.splice(index,1)
        this.$store.commit("removeFormCar",id)
        },
        selectedChanged(id,val){//监听数据勾选状态的改变,val是状态
            console.log(id+"---"+val)
            this.$store.commit("updateGoodsSelected",{id,selected:val});
        }
    },
    components:{
        numberbox
    } 
}
</script>
<style lang="scss" scoped>
.shopCarContainer{
background-color: #eee;
overflow: hidden;
.shopList{
    .mui-card-content-inner{
        display:flex;
        align-items: center;
    }
    .info{
        p{display:flex;
        flex-direction: row;
        }
        
        .shopCarPrice{
        color: red;
        font-weight: bold;
    }
    }
    
    img{
        width: 60px;
        height: 60px;
    }
    h2{
        font-size: 13px;
    } 
}
.mui-checkbox.mui-left input[type="checkbox"], .mui-radio.mui-left input[type="radio"] {

    left: 2px;

}
.mui-checkbox.mui-left label, .mui-radio.mui-left label {

    padding-right: 16px;
    padding-left: 19px;

}
}
.sum{
    display: flex;
    justify-content: space-between;
    align-items: center//纵向居中
   
}
 .red{
        color:red;
        font-weight:bold;
        font-size: 16px;
    }
</style>

